<template>
  <div>

    <el-form>
    <!-- 表格 -->
    <el-table :data="tableData" style="width: 100%" stripe>
      <el-table-column type="index" label="权益ID"> </el-table-column>
      <el-table-column prop="name" label="商品名称"></el-table-column>
      <el-table-column prop="inventory"  label="库存"></el-table-column>
      <el-table-column prop="createDate" label="开始时间"></el-table-column>
      <el-table-column prop="endDate" label="结束时间"></el-table-column>
      <el-table-column prop="state" :formatter="stateFormat" label="商品状态"></el-table-column>
      <el-table-column prop="creator" label=" 管理人"></el-table-column>
      <el-table-column label="操作" width="150px">
        <template slot-scope="scope">
          <el-button size="mini" @click="findOne(scope.row)">查看</el-button>
        </template>
      </el-table-column>

    </el-table>
    <div><el-button size="mini" style="margin-left:5px" @click="goBack">返回</el-button></div>
    </el-form>
  </div>
</template>

<script>
import axios from "axios";

export default {
  name: 'GoodsList',
  data() {
    return {
      formLabelWidth:80,
      tableData: [{
        commodityId:'001',
        commodityName: '小二',
        inventory:'50',
        createDate: '2020-01-22',
        endDate: '2020-02-22',
        state: 1,
        commodityStatus:'1'
        }
      ],
      form: {}
    }
  },

  methods: {
    stateFormat(row, column) {
      if (row.state === 1) {
        return '进行中'
      } else  {
        return '下线'
      }
    },
    getTable() {
      return axios({
        // 查询所有商家接口
        url:"/goods/get/by/userid",
        method:'get',
        params:{
          userId:this.$route.query.userId,
        }
      }).then(res=>{
        // 响应成功
        // 查询出来的该用户的商品列表
        this.tableData = res.data.result;
      },err=>{
        console.log("未响应....")
      })
    },

    search() {
      // 根据商家名查询
      axios({
        // 后端商家名查询接口
        url:"/goods/show/all",
        method:'post',
        data:{
          name:this.input
        }
      }).then(res=>{
        // 响应成功
        console.log(res)
      },err=>{
        console.log("未响应....")
        // console.log(err)
      })
      console.log("SFDS", this.input);
    },

    startOrStop(row) {
      axios({
        // 后端商家名查询接口
        url:"/business/updateBusinessState/"+row.id,
        method:'get',
      }).then(res=>{
        // 响应成功
        if(row.state == 1){
          this.$notify({
            title: '禁用成功',
            message: '账号禁用成功',
            type: 'success'
          });
          row.state = 0;
        }else {
          this.$notify({
            title: '启用成功',
            message: '账号启用成功',
            type: 'success'
          });
          row.state = 1;
        }
      },err=>{
        // 响应失败
        if(row.state == 1){
          this.$notify({
            title: '禁用失败',
            message: '账号禁用失败',
            type: 'warning'
          });
        }else {
          this.$notify({
            title: '启用失败',
            message: '账号启用失败',
            type: 'warning'
          });
        }
      })
    },
    findOne(row){
      // 根据商品id查询商品详情
      this.$router.push({
        path:'/goods/details',
        query:{
          commodityId:row.commodityId
        }
      })
    },
    handleSizeChange(val) {
      this.pageSize = val;
      console.log(`每页 ${val} 条`);
    },
    handleCurrentChange(val) {
      this.page = val;
      console.log(`当前页: ${val}`);
      this.getTable();
    },
    goBack(){
      this.$router.push({
        path:'/business/list'
      })
    }

  },
  mounted() {
    console.log('BusinessList-mounted...');
    this.getTable();
  }
}
</script>

<style>
.header {
  width: 100%;
  display: flex;
}

.addInput {
  width: 90%;
  margin-right: 20px;
}
</style>
